<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="tpl/css/lib/swiper.min.css">
    <link rel="stylesheet" href="tpl/css/app.css">
    <title>Document</title>
</head>
<body>
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
    </style>
    <div id="container" class="product-swiper-container">
        
    </div>

    <script id="tpl" type="text/html">
        <div class="swiper-container product-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide product-slider" style="background-image: url(tpl/img/tmp/3.jpg);">
                    <div class="product-intro">
                        <div class="product-intro-title">包月工作餐</div>
                        <div class="product-intro-title2">￥38元/份</div>
                        <div class="product-intro-info">
                            一次下单，天天有餐<br>
                            专属客服，随时服务
                        </div>
                        <a class="product-detail-btn">查看详情 </a>
                        <div class="product-intro-icon"><img src="tpl/img/dang2.png" alt=""></div>
                    </div>
                    <div class="product-order">
                        <a href="#" class="btn type2">下单</a>
                    </div>
                    <i></i>
                </div>
                <div class="swiper-slide product-slider" style="background-image: url(tpl/img/tmp/4.jpg);">
                    <div class="product-intro">
                        <div class="product-intro-title">工作会议餐</div>
                        <div class="product-intro-title2">￥38元/份</div>
                        <div class="product-intro-info">
                            顶级大厨为你研发菜品<br>
                            1道主菜、5种辅菜、一份主食<br>
                            30个菜品，每日为你新鲜变换 
                        </div>
                        <a class="product-detail-btn">查看详情 </a>
                        <div class="product-intro-icon"><img src="tpl/img/dang2.png" alt=""></div>
                    </div>
                    <div class="product-order">
                        <a href="#" class="btn type2">下单</a>
                    </div>
                    <i></i>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </script>

    <script src="tpl/js/lib/jquery.min.js"></script>
    <script src="tpl/js/lib/swiper.min.js"></script>
    <script src="tpl/js/lib/laytpl.js"></script>
    <script src="tpl/js/app.js"></script>
    <script>
        $(document).ready(function($) {
            renderTpl({})

            var swiper = new Swiper('.swiper-container', {
                direction: 'vertical'
            });
        });
    </script>
</body>
</html>